<template>
  <div>
    <button
      v-for="page in total"
      :key="page"
      :class="page === current ? 'active' : ''"
      @click="$emit('update:current', page)"
    >
      {{ page }}
    </button>

    <select :value="limit" @change="$emit('update:limit', $event.target.value)">
      <option :value="1">每页1条</option>
      <option :value="3">每页3条</option>
      <option :value="5">每页5条</option>
      <option :value="7">每页7条</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["total", "current", "limit"],
};
</script>

<style>
.active {
  background-color: red;
}
</style>
